<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file= "/WEB-INF/pages/base/commImportPage.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>清管评价</title>
	<link rel="stylesheet" type="text/css" href="${resourcePath}/css/guandaoqingli/pig.css">
	<script src="${resourcePath}/tags/reportforms/build/dist/echarts.js"></script>
	<script src="${resourcePath}/tags/reportforms/JS/picECharts.js"></script>
</head>
<body class="body-pad" style="padding-bottom:100px">
<div class="html-header">
    <p class="header-title">历史查询 > <span>清管评价</span></p>
    <a href="javascript:history.back(-1)" class="btn btn-w100 btn-back-icon btn-h30 back" style="top:5px !important"><em></em><span>返回上一级</span></a>

</div>
<div class="container-fluid warp">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix" >
            <div class="evl-icon pad20">
                <div class="icon-div" >
                    <div class="e-left"><img src="${resourcePath}/images/pig/cishu.png" alt=""></div>
                    <div class="e-right">
                        <p class="pe0">${empty headValue.countnum ? '0' : headValue.countnum} 次</p>
                       <p class="pe1">清管次数</p>
                    </div>
                </div>
                <div class="icon-div">
                    <div class="e-left"><img src="${resourcePath}/images/pig/hs.png" alt=""></div>
                    <div class="e-right">
                       <p class="pe0">${empty headValue.avgSpeed ? '' : headValue.avgSpeed} m/s</p>
                        <p class="pe1">平均速度</p>
                    </div>
                </div>
                <div class="icon-div">
                    <div class="e-left"><img src="${resourcePath}/images/pig/wsl.png" alt=""></div>
                    <div class="e-right">
                        <p class="pe0">${empty headValue.dirt ? '0' : headValue.dirt} Kg</p>
                        <p class="pe1">污水</p>
                    </div>
                </div>
                <div style="width:19%" class="icon-div no">
                    <div class="e-left"><img src="${resourcePath}/images/pig/wwl.png" alt=""></div>
                    <div class="e-right">
                        <p class="pe0">${empty headValue.sewage ? '0' : headValue.sewage} Kg</p>
                        <p class="pe1">污物</p>
                    </div>
                </div>
            </div>
            <div class="l-r clearFix pad20">
                <div class="fu">
                    <div class="left tab01">
                        <div class="info-header clearFix">
                            <ul class="ul-header">
                            	<li class="new-15">任务名称</li>
                                <li class="new-15">实际清管时间</li>
                                <li class="new-15">清管类型</li>
                                <li class="new-15">清管工具</li>
                                <li class="new-12-5">污水(Kg)</li>
                                <li class="new-12-5">污物(Kg)</li>
                                <li class="new-w5">压差(Mpa)</li>
                                <li class="new-w10 no-right">清除物描述</li>
                            </ul>
                            <div style="border-left:1px solid #d7dde9">
                                <c:if test="${not empty listValue }" >
                                		<c:forEach items="${listValue }" var="lv" varStatus="status">
                                			<div class="info-tr">
	                                			<ul class ="ul-header bg-white">
	                                				<li class="new-15" title="${lv.TASKNAME }">${lv.TASKNAME }</li>
	                                				<li class="new-15" title="<fmt:formatDate value="${lv.PAGDATETIME }" pattern="yyyy-MM-dd HH:mm:ss"/>"><fmt:formatDate value="${lv.PAGDATETIME }" pattern="yyyy-MM-dd HH:mm:ss"/></li>
	                                				<li class="new-15" title="${lv.TYPE }">${lv.TYPE }</li>
	                                				<c:if test="${empty lv.PIGTYPE }">
	                                					<li class="new-15" title="${lv.DETECTERTYPE}">${lv.DETECTERTYPE}</li>
	                                				</c:if>
	                                				<c:if test="${empty lv.DETECTERTYPE }">
	                                					<li class="new-15" title="${lv.PIGTYPE}">${lv.PIGTYPE}</li>
	                                				</c:if>
	                                				<li class="new-12-5" title="${lv.DIRT }">${lv.DIRT }</li>
	                                				<li class="new-12-5" title="${lv.SEWAGE }">${lv.SEWAGE }</li>
	                                				<li class="new-w5" title="${lv.PRESSDIF }">${lv.PRESSDIF }</li>
	                                				<li class="new-w10 no-right" title="${lv.DISCREPTION }">${lv.DISCREPTION }</li>
	                                			</ul>
                                			</div>
                                		</c:forEach>
                                	</c:if> 
                                	<c:if test="${ empty listValue }" >
                                		<div class="no-data ">
				                            <img src="${resourcePath}/images/pig/no-data.png" alt=""/>
				                        </div>
                                	</c:if>
                                <!-- <div class="info-tr">
                                    <ul class="ul-header bg-white">
                                        <li class="w-20-1" title="检测任务1">检测任务1</li>
                                        <li class="w-20-1" title="苏州官网苏州官网">苏州官网苏州官网</li>
                                        <li class="w12-11" title="fksjhfksjd">fksjhfksjd</li>
                                        <li class="w12-11" title="fsdfdsfds">fsdfdsfds</li>
                                        <li class="w12-11" title="2015-12-30">2015-12-30</li>
                                        <li class="w12-11" title="发送中">发送中</li>
                                    </ul>
                                    <div class="show-ul none"></div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zhexian-pic pad20" style="margin-top:20px;background-color:white;">
                <div class="kuantu" id="areaDiv">
                </div>
            </div>
            <div class="zhexian-pic pad20" style="margin-top:20px;background-color:white;">
                <div class="kuantu" id="lineDiv">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
    	loadAreaDiv();
    	loadLineDiv();
    });
    function loadAreaDiv(){
    	var echarts=new PicEChart();
		var chartName ="清管评价";
		var legends= ['污水','污物'];
		var name = "污水";
		var name2 = "污物";
		var divObject = "areaDiv";
		
		var ss = $(".info-tr");
		var ssArr = ss.children("ul");
		//横轴的数据
		var data1Arr = new Array();
		//污水的数据
		var data2Arr = new Array();
		//污物的数据
		var data3Arr = new Array();
		for (var int = 0; int < ssArr.length; int++) {
			var dataArr = ssArr[int].children;
			var data1 = dataArr[0].innerText;
			var data2 = dataArr[4].innerText;
			var data3 = dataArr[5].innerText;
			data1Arr.push(data1);
			data2Arr.push(data2);
			data3Arr.push(data3);
		}
		var Axisdata=data1Arr;
		echarts.addMutiplyBar({"chartName":chartName,"legends":legends,"data":data2Arr,"data2":data3Arr,"Axisdata":Axisdata,"divObject":divObject,"name":name,"name2":name2});
    }
    function loadLineDiv(){
    	var echarts=new PicEChart();
    	var chartName ="清管评价";
    	var legends= ['压差'];
    	var name = "压差";
    	var divObject = "lineDiv";
    	var ssArr = $(".info-tr").children("ul");
    	//横轴的数据
		var data1Arr = new Array();
		//压差的数据
		var data2Arr = new Array();
		for (var int = 0; int < ssArr.length; int++) {
			var dataArr = ssArr[int].children;
			var data1 = dataArr[0].innerText;
			var data2 = dataArr[6].innerText;
			data1Arr.push(data1);
			data2Arr.push(data2);
		}
		var Axisdata=data1Arr;
		var type ="line";
		//echarts.addLineOrBar({"chartName":chartName,"type":type,"legends":legends,"data1":data2Arr,"Axisdata":Axisdata,"divObject":divObject,"name1":name});
   		echarts.addLine({"chartName":chartName,"legends":legends,"data":data2Arr,"Axisdata":Axisdata,"divObject":divObject,"name":name})
    
    }
</script>
</body>
</html>